<template>
	<view>
		<!-- <轮播图> -->
    <view class="swiper-container">
            <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
                <swiper-item v-for="(item, index) in imgList" :key="index">
                    <image :src="item" mode="cover"></image>
                </swiper-item>
            </swiper>
        </view>
        <view class="image-container">
            <image :src="imageSrc" :mode="cover" @error="handleImageError" @load="handleImageLoad"></image>
          </view>
          
		 <!-- 游玩指南 -->
		<view class="card guide">
			
			<view class="guide_container">
        <view @click="gotoPage('feitabbar','/play/play')">
        	<text class="h3">我要玩</text>
        	<text>最有意思的玩法</text>
        </view>
        <view @click="gotoPage('feitabbar','/YOU-WAN/YOU-WAN')">
        	<text class="h3">我要游</text>
        	<text>最有特色的景点</text>
        </view>
				<view @click="gotoPage('feitabbar','/eat/index')">
					<text class="h3">我要吃</text>
					<text>最具代表性的美食</text>
				</view>
				<view @click="gotoPage('feitabbar','/live/hotel')">
					<text class="h3">我要住</text>
					<text>舒适便捷的居住场所</text>
				</view>
			</view>
		</view>
		
		<!-- 旅游人气榜 -->
		<view class="card rank">
			<text class="h2">旅游人气榜</text>
			<view class="spot">
				<view style="background: linear-gradient(to bottom,#2A83DC,#2A84DA);"><text>景点</text><text>人气榜</text></view>
				<view class="flex flex-direction justify-between" style="height: 74px;">
					<view @click="toSpotDetail(item.id)" v-for="(item,index) in getredspot" :key="item.id">
						<text class="text-bold margin-right-xs">{{index+1}}</text> 
						<text>{{item.spotName}}</text> 
					</view>
				</view>
			</view>
			<view class="strategy margin-top-sm">
				<view style="background: linear-gradient(to top,#F2B7D9,#E977B7);"><text>美食</text><text>人气榜</text></view>
				<view class="flex flex-direction justify-between" style="height: 74px;">
					<view @click="toStragegyDetail(item.id)" v-for="(item,index) in getredstrategy" :key="item.id">
						<text class="text-bold margin-right-xs">{{index+1}}</text> 
						<text>{{item.title}}</text> 
					</view>
				</view>
			</view>
      <view class="strategy margin-top-sm">
      		<view style="background: linear-gradient(to top,#ADD8E6,#E977B7);"><text>酒店</text><text>人气榜</text></view>
      		<view class="flex flex-direction justify-between" style="height: 74px;">
      			<view @click="toStragegyDetail(item.id)" v-for="(item,index) in getredstrategytwo" :key="item.id">
      				<text class="text-bold margin-right-xs">{{index+1}}</text> 
      				<text>{{item.title}}</text> 
      			</view>
      		</view>
      	</view>
      </view>
	</view>

</template>

<script>
	import indexApi from "@/api/authApi.js"
	export default {
		data() {
			return {                       
				 // swiperList: swiperList,
				 getredspot:  [{
           spotName:"齐齐哈尔最值得去的地方"
         }],
				 getredstrategy:  [{title:"齐齐哈尔最值得去吃的"}],
         getredstrategytwo:  [{title:"齐齐哈尔最值得去住的地方"}],
				userPlain: {},
				 notice: null,
         imgList: [
            '/static/images/烤肉.jpg',
            '/static/images/博物馆.jpg',
            '/static/images/酒店7.jpg',
            '/static/images/游乐园2.jpg'
            
        ]
			}
		},
		onLoad() {
			indexApi.login().then(res => {
				this.getredspot = res.data
			})
			indexApi.getredstrategy().then(res => {
				this.getredstrategy = res.data
			})
			indexApi.getnewplan().then(res => {
				this.userPlain = res.data
				this.userPlain.content = res.data.content.map(item=>({
					title: item.describle,
					desc: item.dateTime
				}))
			})
			indexApi.getconfig({key: 'SNOWY_BIZ_NOTICE'}).then(res => {
				this.notice = res.data
			})
		},
		methods: {
			gotoPage(type,path){
				if (type==='tabbar') {
					uni.switchTab({
						url:'/pages' + path
					})
				} else{
					uni.navigateTo({
						url:'/pages' + path
					})
				}
			},
			toPlainDetail(id){
				uni.navigateTo({
					url:'/pages/user/children/plain/detail?id='+id
				})
			},
			toSpotDetail(id){
				uni.navigateTo({
					url:'/pages/spot/detail?id='+id
				})
			},
			toStragegyDetail(id){
				uni.navigateTo({
					url:'/pages/strategy/detail?id='+id
				})
			},
              
		}
	} 
</script>



<style scoped lang="scss">
	.guide_container{
		display: grid;
		grid-template-rows: 1fr 1fr; /* 定义两行 */
		grid-template-columns: 1fr 1fr; /* 定义两列 */
	  grid-template-areas:
												"item1 item2"
												"item3 item4"; /* 定义每个网格项的位置 */
		grid-gap: 10px;
		color: #fff;
		
		&>view {
		  background-color: #f0f0f0; /* 网格项背景色，可以根据需要调整 */
			padding: 10px;
			border-radius: 6px;
		}
		
		&>view:nth-child(1) {
		  grid-area: item1; /* 第一列元素占据两行 */
			background: linear-gradient(to top,#70B13B,#84CA45);
		}
		
		&>view:nth-child(2) {
		  grid-area: item2;
			background: linear-gradient(to right,#2996FD,#44BAFA);
		}
		
		&>view:nth-child(3) {
		  grid-area: item3;
			background: linear-gradient(to left,#D2B48C, #A0522D);
		}
    &>view:nth-child(4) {
      grid-area: item4;
    	background: linear-gradient(to left,#EC8C1B,#D17D1D);
    }
	}

	.rank{
		display: flex;
		flex-direction: column;
		gap: 10px;
		
		.spot,.strategy{
			display: grid;
			grid-template-columns: 100px 1fr;
			align-items: center;
			
			&>view:nth-child(1){
				width: 80px;
				height: 80px;
				border-radius: 10px;
				background-color: aquamarine;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				gap: 4px;
				color: #fff;
			}
			
			&>view:nth-child(2){
				font-size: 13px;
				
				&>view:nth-child(1)>text:nth-child(1){
					color: red;
				}
				&>view:nth-child(2)>text:nth-child(1){
					color: greenyellow;
				}
				&>view:nth-child(3)>text:nth-child(1){
					color: skyblue;
				}
			}
		}
	}
	
	.step{
		overflow: scroll;
	}
	
	::v-deep .uni-steps__row-line-item,
	::v-deep .uni-steps__row-text{
		flex: 0!important;
		width: fit-content!important;
		flex-basis: 150px!important;
		flex-shrink: 0!important;
	}
	.swiper-container {
	    width: 100%;
	    height: 100% /* 可以根据实际需求调整轮播图的高度 */
     
	}
	
	image {//轮播图照片的高度
	    width: 100%;
	    height: 100%;
       object-fit: cover;
      
	}
	
</style>